<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>H+移动工作平台 - 资产维修申请</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <link rel="stylesheet" href="../css/styles.css">
</head>
<body>
  <div class="device-container">
    <!-- 状态栏 -->
    <div class="status-bar">
      <div class="status-bar-left">
        <span class="time">9:41</span>
      </div>
      <div class="status-bar-right">
        <i class="fas fa-signal signal"></i>
        <i class="fas fa-wifi wifi"></i>
        <i class="fas fa-battery-full battery"></i>
      </div>
    </div>
    
    <!-- 导航栏 -->
    <div class="nav-bar">
      <div class="nav-left">
        <a href="asset.html"><i class="fas fa-arrow-left"></i></a>
      </div>
      <div class="nav-title">资产维修申请</div>
      <div class="nav-right">
        <i class="fas fa-question-circle"></i>
      </div>
    </div>
    
    <!-- 内容区域 -->
    <div class="app-content">
      <!-- 表单区域 -->
      <div class="p-4">
        <form id="repairForm">
          <!-- 资产选择 -->
          <div class="form-group">
            <label class="form-label">选择资产</label>
            <div class="input-group" id="assetSelector">
              <input type="text" readonly placeholder="点击选择需要维修的资产" class="form-input">
              <i class="fas fa-chevron-right text-gray-400"></i>
            </div>
          </div>
          
          <!-- 资产信息 -->
          <div class="form-group" id="assetInfo" style="display: none;">
            <label class="form-label">资产信息</label>
            <div class="bg-gray-50 p-3 rounded-lg">
              <div class="grid grid-cols-2 gap-2">
                <div>
                  <div class="text-gray-500 text-xs">资产编号</div>
                  <div class="text-sm font-medium" id="assetCode">-</div>
                </div>
                <div>
                  <div class="text-gray-500 text-xs">使用部门</div>
                  <div class="text-sm font-medium" id="assetDept">-</div>
                </div>
                <div>
                  <div class="text-gray-500 text-xs">购入日期</div>
                  <div class="text-sm font-medium" id="assetPurchaseDate">-</div>
                </div>
                <div>
                  <div class="text-gray-500 text-xs">保修状态</div>
                  <div class="text-sm font-medium" id="assetWarranty">-</div>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 维修类型 -->
          <div class="form-group">
            <label class="form-label">维修类型</label>
            <div class="grid grid-cols-3 gap-2">
              <div class="radio-card">
                <input type="radio" name="repairType" id="hardware" value="hardware" checked>
                <label for="hardware">
                  <div class="radio-icon bg-red-100">
                    <i class="fas fa-tools text-red-500"></i>
                  </div>
                  <div class="radio-text">硬件维修</div>
                </label>
              </div>
              
              <div class="radio-card">
                <input type="radio" name="repairType" id="software" value="software">
                <label for="software">
                  <div class="radio-icon bg-blue-100">
                    <i class="fas fa-code text-blue-500"></i>
                  </div>
                  <div class="radio-text">软件维修</div>
                </label>
              </div>
              
              <div class="radio-card">
                <input type="radio" name="repairType" id="other" value="other">
                <label for="other">
                  <div class="radio-icon bg-green-100">
                    <i class="fas fa-question text-green-500"></i>
                  </div>
                  <div class="radio-text">其他问题</div>
                </label>
              </div>
            </div>
          </div>
          
          <!-- 故障描述 -->
          <div class="form-group">
            <label class="form-label">故障描述</label>
            <textarea class="form-textarea" rows="4" placeholder="请详细描述资产故障情况..."></textarea>
          </div>
          
          <!-- 紧急程度 -->
          <div class="form-group">
            <label class="form-label">紧急程度</label>
            <div class="flex items-center">
              <div class="flex-1">
                <input type="range" min="1" max="3" value="2" class="w-full" id="urgencySlider">
              </div>
              <div class="ml-4 text-sm font-medium" id="urgencyText">一般</div>
            </div>
            <div class="flex justify-between text-xs text-gray-500 mt-1">
              <span>普通</span>
              <span>一般</span>
              <span>紧急</span>
            </div>
          </div>
          
          <!-- 期望完成时间 -->
          <div class="form-group">
            <label class="form-label">期望完成时间</label>
            <input type="date" class="form-input">
          </div>
          
          <!-- 上传照片 -->
          <div class="form-group">
            <label class="form-label">故障照片（选填）</label>
            <div class="grid grid-cols-4 gap-2">
              <div class="upload-box">
                <input type="file" id="photoUpload" accept="image/*" multiple hidden>
                <label for="photoUpload" class="upload-label">
                  <i class="fas fa-camera"></i>
                  <span>上传</span>
                </label>
              </div>
            </div>
          </div>
          
          <!-- 维修地点 -->
          <div class="form-group">
            <label class="form-label">维修地点</label>
            <div class="grid grid-cols-2 gap-2">
              <div class="radio-card">
                <input type="radio" name="repairLocation" id="onsite" value="onsite" checked>
                <label for="onsite">
                  <div class="radio-icon bg-blue-100">
                    <i class="fas fa-building text-blue-500"></i>
                  </div>
                  <div class="radio-text">现场维修</div>
                </label>
              </div>
              
              <div class="radio-card">
                <input type="radio" name="repairLocation" id="offsite" value="offsite">
                <label for="offsite">
                  <div class="radio-icon bg-purple-100">
                    <i class="fas fa-truck text-purple-500"></i>
                  </div>
                  <div class="radio-text">送修</div>
                </label>
              </div>
            </div>
          </div>
          
          <!-- 联系人信息 -->
          <div class="form-group">
            <label class="form-label">联系人信息</label>
            <input type="text" class="form-input" placeholder="联系人姓名">
          </div>
          
          <div class="form-group">
            <input type="tel" class="form-input" placeholder="联系电话">
          </div>
          
          <!-- 提交按钮 -->
          <div class="mt-8">
            <button type="submit" class="btn-primary w-full">提交维修申请</button>
          </div>
        </form>
      </div>
    </div>
    
    <!-- 底部标签栏 -->
    <div class="tab-bar">
      <a href="home.html" class="tab-item">
        <i class="fas fa-home tab-icon"></i>
        <span>首页</span>
      </a>
      <a href="asset.html" class="tab-item active">
        <i class="fas fa-laptop tab-icon"></i>
        <span>资产</span>
      </a>
      <a href="finance.html" class="tab-item">
        <i class="fas fa-wallet tab-icon"></i>
        <span>财务</span>
      </a>
      <a href="material.html" class="tab-item">
        <i class="fas fa-box tab-icon"></i>
        <span>物资</span>
      </a>
      <a href="profile.html" class="tab-item">
        <i class="fas fa-user tab-icon"></i>
        <span>我的</span>
      </a>
    </div>
  </div>
  
  <!-- 资产选择模态框 -->
  <div class="modal" id="assetModal">
    <div class="modal-content">
      <div class="modal-header">
        <div class="modal-title">选择资产</div>
        <button class="modal-close"><i class="fas fa-times"></i></button>
      </div>
      <div class="modal-body">
        <div class="search-box mb-4">
          <i class="fas fa-search search-icon"></i>
          <input type="text" placeholder="搜索资产编号或名称" class="search-input">
        </div>
        <div class="asset-list">
          <div class="asset-item" data-id="A2023001" data-code="A2023001" data-dept="信息科技部" data-purchase="2023-01-15" data-warranty="在保修期内">
            <div class="asset-info">
              <div class="asset-name">联想ThinkPad X1 Carbon</div>
              <div class="asset-meta">编号: A2023001 | 状态: 在用</div>
            </div>
            <div class="asset-select">
              <i class="fas fa-check-circle"></i>
            </div>
          </div>
          <div class="asset-item" data-id="A2023002" data-code="A2023002" data-dept="信息科技部" data-purchase="2023-02-20" data-warranty="在保修期内">
            <div class="asset-info">
              <div class="asset-name">戴尔 OptiPlex 7080</div>
              <div class="asset-meta">编号: A2023002 | 状态: 在用</div>
            </div>
            <div class="asset-select">
              <i class="fas fa-check-circle"></i>
            </div>
          </div>
          <div class="asset-item" data-id="A2023003" data-code="A2023003" data-dept="信息科技部" data-purchase="2022-11-05" data-warranty="在保修期内">
            <div class="asset-info">
              <div class="asset-name">惠普 LaserJet Pro M428fdw</div>
              <div class="asset-meta">编号: A2023003 | 状态: 在用</div>
            </div>
            <div class="asset-select">
              <i class="fas fa-check-circle"></i>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button class="btn-secondary" id="cancelAssetSelect">取消</button>
        <button class="btn-primary" id="confirmAssetSelect">确定</button>
      </div>
    </div>
  </div>
  
  <script>
    // 紧急程度滑块
    const urgencySlider = document.getElementById('urgencySlider');
    const urgencyText = document.getElementById('urgencyText');
    
    urgencySlider.addEventListener('input', function() {
      const value = parseInt(this.value);
      let text = '一般';
      
      if (value === 1) {
        text = '普通';
      } else if (value === 3) {
        text = '紧急';
      }
      
      urgencyText.textContent = text;
    });
    
    // 资产选择模态框
    const assetSelector = document.getElementById('assetSelector');
    const assetModal = document.getElementById('assetModal');
    const cancelAssetSelect = document.getElementById('cancelAssetSelect');
    const confirmAssetSelect = document.getElementById('confirmAssetSelect');
    const assetInfo = document.getElementById('assetInfo');
    
    assetSelector.addEventListener('click', function() {
      assetModal.classList.add('active');
    });
    
    cancelAssetSelect.addEventListener('click', function() {
      assetModal.classList.remove('active');
    });
    
    confirmAssetSelect.addEventListener('click', function() {
      const selectedAsset = document.querySelector('.asset-item.selected');
      if (selectedAsset) {
        const assetName = selectedAsset.querySelector('.asset-name').textContent;
        assetSelector.querySelector('input').value = assetName;
        
        // 显示资产信息
        document.getElementById('assetCode').textContent = selectedAsset.dataset.code;
        document.getElementById('assetDept').textContent = selectedAsset.dataset.dept;
        document.getElementById('assetPurchaseDate').textContent = selectedAsset.dataset.purchase;
        document.getElementById('assetWarranty').textContent = selectedAsset.dataset.warranty;
        assetInfo.style.display = 'block';
      }
      assetModal.classList.remove('active');
    });
    
    // 资产项选择
    document.querySelectorAll('.asset-item').forEach(item => {
      item.addEventListener('click', function() {
        document.querySelectorAll('.asset-item').forEach(el => {
          el.classList.remove('selected');
        });
        this.classList.add('selected');
      });
    });
    
    // 照片上传预览
    document.getElementById('photoUpload').addEventListener('change', function(e) {
      const files = e.target.files;
      const uploadBox = document.querySelector('.upload-box');
      const parent = uploadBox.parentElement;
      
      for (let i = 0; i < files.length; i++) {
        if (i >= 3) break; // 最多上传3张照片
        
        const reader = new FileReader();
        reader.onload = function(event) {
          const photoPreview = document.createElement('div');
          photoPreview.className = 'photo-preview';
          photoPreview.innerHTML = `
            <img src="${event.target.result}" class="preview-image">
            <button type="button" class="remove-photo"><i class="fas fa-times"></i></button>
          `;
          parent.insertBefore(photoPreview, uploadBox);
          
          // 删除照片
          photoPreview.querySelector('.remove-photo').addEventListener('click', function() {
            photoPreview.remove();
          });
        };
        reader.readAsDataURL(files[i]);
      }
      
      // 重置文件输入，允许再次选择相同文件
      this.value = '';
    });
    
    // 表单提交
    document.getElementById('repairForm').addEventListener('submit', function(e) {
      e.preventDefault();
      
      // 验证表单
      const assetInput = document.querySelector('#assetSelector input');
      if (!assetInput.value) {
        alert('请选择需要维修的资产');
        return;
      }
      
      const faultDesc = document.querySelector('textarea');
      if (!faultDesc.value.trim()) {
        alert('请填写故障描述');
        return;
      }
      
      // 提交表单
      alert('维修申请已提交，等待处理');
      // 实际应用中这里应该有AJAX请求提交表单数据
    });
    
    // 关闭模态框
    document.querySelectorAll('.modal-close').forEach(button => {
      button.addEventListener('click', function() {
        this.closest('.modal').classList.remove('active');
      });
    });
  </script>
  
  <style>
    /* 照片预览样式 */
    .photo-preview {
      position: relative;
      width: 100%;
      padding-bottom: 100%;
      border-radius: 8px;
      overflow: hidden;
    }
    
    .preview-image {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .remove-photo {
      position: absolute;
      top: 4px;
      right: 4px;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.5);
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      border: none;
      cursor: pointer;
    }
    
    .upload-box {
      width: 100%;
      padding-bottom: 100%;
      position: relative;
      border: 2px dashed #ddd;
      border-radius: 8px;
    }
    
    .upload-label {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: #888;
    }
    
    .upload-label i {
      font-size: 24px;
      margin-bottom: 4px;
    }
    
    .upload-label span {
      font-size: 12px;
    }
    
    /* 紧急程度滑块样式 */
    input[type="range"] {
      -webkit-appearance: none;
      height: 6px;
      background: #e5e7eb;
      border-radius: 3px;
      outline: none;
    }
    
    input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 18px;
      height: 18px;
      background: #3b82f6;
      border-radius: 50%;
      cursor: pointer;
    }
  </style>
</body>
</html>